前一篇我們提到了一部分的啟動流程，今天我們會探討剩下的啟動流程資訊。

首先，我們要先知道 JavaScript 是從哪一個程式開始跑，而 Angular 應用程式的進入點就是專案中的 main.ts 檔案，如下圖。

• 1. 此部分是從 npm 模組中匯入的物件。
• 2. 此部分則是透過 platformBrowserDynamic 來執行啟動模組的動作，接著會進入 AppModule 執行。

接著我們按住 ctrl 鍵去點擊畫面中的 AppModule（或是在畫面中的 AppModule 點擊一下，接著按 f12 鍵），就會打開 app.module.ts 的檔案。

接著我們來簡單說明一下，app.module.ts 檔案中的組成。

• 1. AppModule 可以說是 Angular 應用程式中最重要的一支程式，可以看到他是一個 class 並被 export，在大部分的情況下，AppModule 裡不需要撰寫程式碼。
• 2. 承上，我們不需要在 AppModule 裡面撰寫程式碼，只需要套用一個 decorator(裝飾器)，並設定為 NgModule，來宣告這個類別是一個 Angular 裡的 module，而下面會繼續說明 @NgModule 裡宣告的幾個 property。
• 3. declarations 這個 property 是用來宣告跟 view 有關的元件。
• 4. imports 這個 property 是用來匯入一些會在 AppModule 這個模組裡會用到的其他模組，模組代表了元件的集合，就像一個群體，所以在 imports 裡面匯入的 BrowserModule，就代表把 BrowserModule 裡面所包含的 component 一併匯入進來。
• 5. providers 裡頭會註冊一些 service（我們後續會再提到 service 的部分）。
• 6. bootstrap 則是啟動 Angular 應用程式的根元件 AppComponent。

我們再按住 ctrl 鍵並點擊 AppComponent，打開 app.component.ts，接著我們來看看 app.component.ts 的組成。

• 1. 我們同樣可以看到 AppComponent 為一個 class，而裡頭預設有一個 title 的 property。
• 2. 這裡是一個名為 Component 的 decorator(裝飾器)，宣告 AppComponent 這個 class 代表著 Angular 裡的一個 component（元件），接著會介紹 Component 裡宣告的一些屬性。
• 3. selector 是一個選取器，而 selector 裡的 app-root 則是對應 index.html 裡的 app-root 標籤，如下圖。
     
     這也代表著這個 component 會到網頁中找到 app-root 這個標籤，並把這個標籤裡的內容置換成 component 執行的結果。

• 4. templateUrl 代表 AppComponent 的 html template 所在的位置，也就是同目錄下的 app.component.html 這個檔案。
     

     而這個 html 檔案，就是開發伺服器的首頁內容，如下圖之對照。
     

     
     所以 Angular 裡每一個 component 都有一個對應的 template，這個 HTML Template 負責資料顯示，而程式碼、事件及屬性資料則會定義在該 component 的 class 裡面，以本篇專案的結構來說，就是指 app.component.ts 這個檔案。

• 5. styleUrls 定義了一個 CSS 檔案，就是同目錄底下的 app.component.css 檔案，可以設定 app.component.html 裡會用到的 CSS，在預設的情況，這個 CSS 檔依附在 component 底下獨立存在，即便將來開發過程中產生了更多 component，在不同的 component 裡使用了相同的 class 名稱去設定 CSS 樣式，也不會互相衝突。

啟動流程快速複習

1. 首先在瀏覽器中輸入應用程式對應的網址，打開 index.html。

2. index.html 裡會載入一段 JavaScript，這是由 Webpack 產生的，並動態載入。

3. 而 Angular 執行時，進入點是 main.ts 這個檔案。

4. 接著從 main.ts 這個檔案裡面，會啟動 AppModule。

5. 在 AppModule 裡面又去啟動 Angular 應用程式的根元件 AppComponent。

6. AppComponent 會開始執行 AppComponent 這個 class，並找到相對應的 template，接著載入這個 component 的 CSS 樣式檔（如果有設定的話）。

7. 最後，程式執行結束，所有內容呈現在網頁上。

以上，就是 Angular 應用程式啟動流程的簡介。